<template>
    <div>
        <!-- 宿主机基本信息  -->
        <el-row>
            <el-col :xs="12" :sm="12" :md="12" :lg="12">
                <div style="height:36px;line-height:36px">宿主机基本信息</div>
            </el-col>
            <el-col :xs="12" :sm="12" :md="12" :lg="12">
                <div class="grid-content bg-purple-light" style="float:right">
                    <el-button>查看落位图</el-button>
                </div>
            </el-col>
        </el-row>
        <div style="height:34px;line-height:34px;font-size:0.9em;color:#666">
            IPMI IP：{{baseData.ipmiAddr}} &nbsp&nbsp SN：{{baseData.snNum}} &nbsp &nbsp {{baseData.roomName}} &nbsp &nbsp {{baseData.cabinetCode}} &nbsp &nbsp {{baseData.startNum}}-{{baseData.endNum}}U
        </div>
        <div style="height:36px;line-height:36px">宿主资源分配</div>
        <el-row>
            <el-col :xs="8" :sm="8" :md="8" :lg="8">
                <charts-pie :height="pieHeight" :chartData="chartsData.cpuData.data" :legendData="chartsData.cpuData.legendData" :title="chartsData.cpuData.title" ref="realCpu"></charts-pie>
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="8">
                <charts-pie :height="pieHeight" :chartData="chartsData.memoryData.data" :legendData="chartsData.memoryData.legendData" :title="chartsData.memoryData.title" ref="realMemory"></charts-pie>
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="8">
                <charts-pie :height="pieHeight" :chartData="chartsData.diskData.data" :legendData="chartsData.diskData.legendData" :title="chartsData.diskData.title" ref="realDisk"></charts-pie>
            </el-col>
        </el-row>
        <div style="height:36px;line-height:36px;">虚拟机信息</div>
        <el-row>
            <el-col :xs="24" :sm="24" :md="12" :lg="12" style="margin-bottom:21px">
                <el-row :gutter="20">
                    <el-col :xs="6" :sm="6" :md="6" :lg="6">
                        <div class="grid-content bg-purple-light">
                            <el-button class="btnSty">新增</el-button>
                        </div>
                    </el-col>
                    <el-col :xs="6" :sm="6" :md="6" :lg="6">
                        <div class="grid-content bg-purple-light">
                            <el-button class="btnSty">修改</el-button>
                        </div>
                    </el-col>
                    <el-col :xs="6" :sm="6" :md="6" :lg="6">
                        <div class="grid-content bg-purple-light">
                            <el-button @click="deleteVirtual" class="btnSty">删除</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="12" style="margin-bottom:21px">
                <el-row :gutter="20">
                    <el-col :xs="6" :sm="6" :md="6" :lg="6">
                        <div class="grid-content bg-purple-light">
                            <el-button @click="virtualState('1')" class="btnSty">运行</el-button>
                        </div>
                    </el-col>
                    <el-col :xs="6" :sm="6" :md="6" :lg="6">
                        <div class="grid-content bg-purple-light">
                            <el-button @click="virtualState('2')" class="btnSty">暂停</el-button>
                        </div>
                    </el-col>
                    <el-col :xs="6" :sm="6" :md="6" :lg="6">
                        <div class="grid-content bg-purple-light">
                            <el-button @click="virtualState('3')" class="btnSty">挂起</el-button>
                        </div>
                    </el-col>
                    <el-col :xs="6" :sm="6" :md="6" :lg="6">
                        <div class="grid-content bg-purple-light">
                            <el-button @click="virtualState('4')" class="btnSty">停止</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <!-- 虚拟机信息表 -->
        <el-table :data="virtualData" border tooltip-effect="dark" style="width: 100%">
            <el-table-column width="55">
                <template scope="scope">
                    <el-radio class="radio" v-model="virtualRadio" :label="scope.row">管理IP</el-radio>
                </template>
            </el-table-column>
            <el-table-column label="虚拟机" min-width="120px">
                <template scope="scope">
                    <span style="color:blue">{{ scope.row.virtualHostName }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="状态" min-width="80px">
                <template scope="scope">
                    <span>{{ scope.row.stateName }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="系统" min-width="80px">
                <template scope="scope">
                    <span>{{ scope.row.osName }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="CPU" min-width="80px">
                <template scope="scope">
                    <span>{{ scope.row.cpuNum+'核'}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="内存" min-width="80px">
                <template scope="scope">
                    <span>{{ scope.row.memoryCapacity+'G'}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="硬盘" min-width="150px">
                <template scope="scope">
                    <div v-for="list in scope.row.virtualDisks" :key="list.diskId">{{ list.diskCapacity+'G'}}&nbsp&nbsp&nbsp&nbsp
                        <span style="color:blue">{{list.hostIp}}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="IP地址" min-width="150px">
                <template scope="scope">
                    <div v-for="list in scope.row.virtualNetworkCards" :key="list.cardId">{{ list.cardName+'：'+list.cardIp}}</div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<style>
.btnSty {
    display: inline-block;
    width: 100%
}
</style>
<script>
import ChartsPie from '@/components/charts-pie';
export default {
    name: 'realInfo',
    components: {
        ChartsPie,
    },
    props: {
        deviceId: {
            type: String,
            default: ''
        },
        pieHeight: {
            type: String,
            default: ''
        }
    },
    watch: {
        deviceId: function(val) {
            this.getServersInfo(val);
        },
    },
    created() {
        if (this.deviceId !== '') {
            this.getServersInfo(this.deviceId);
        }
    },
    beforeDestroy() {
        window.onresize = () => { };
    },

    mounted() {
        window.onresize = () => {
            this.$refs.realCpu.chart.resize();
            this.$refs.realMemory.chart.resize();
            this.$refs.realDisk.chart.resize();
        };
    },
    data() {
        return {
            //宿主机信息
            //基础信息
            baseData: [],
            //图表信息
            chartsData: {
                cpuData: {
                    title: '',
                    data: [],
                    legendData: []
                },
                diskData: {
                    title: '',
                    data: [],
                    legendData: []
                },
                memoryData: {
                    title: '',
                    data: [],
                    legendData: []
                }
            },
            //虚拟机信息
            virtualRadio: null,
            virtualData: [],
        }
    },
    methods: {
        //获取宿主机信息
        getServersInfo(deviceId) {
            this.pieInfo = [];
            let _url = '/resman/virtual/server/info/' + deviceId;
            this.$http.get(_url).then((response) => {
                console.log(response)
                if (response.code === 0) {
                    this.baseData = response.data.server_base;
                    this.chartsData.cpuData = this.chartComputed('CPU', '核', response.data.server_resource.cpu);
                    this.chartsData.memoryData = this.chartComputed('内存', 'G', response.data.server_resource.memory);
                    this.chartsData.diskData = this.chartComputed('硬盘', 'G', response.data.server_resource.disk);
                    this.virtualData = response.data.virtualMachines;
                } else {
                    console.log(response.msg)
                }
            }).catch((response) => {
                console.log(response)
            })
        },
        //处理数据，供图表使用
        chartComputed(type, unit, data) {
            let temp_obj = {
                title: type + '：' + (data.total - data.unUsed) + ' / ' + data.total + unit,
                data: [],
                legendData: []
            };
            let kind = type === 'CPU' ? 'virtualCpu' : type === '内存' ? 'virtualMemory' : 'virtualDisk';
            data[kind].forEach(item => {
                temp_obj.data.push({ value: item.value, name: item.name + '：' + item.value + unit });
                temp_obj.legendData.push(item.name + '：' + item.value + unit);
            });
            temp_obj.data.push({ value: data.unUsed, name: '可分配：' + data.unUsed + unit, itemStyle: { normal: { color: '#ccc' } } });
            temp_obj.legendData.push('可分配：' + data.unUsed + unit);
            return temp_obj;
        },
        // 删除宿主虚拟机操作
        deleteVirtual() {
            console.log(this.virtualRadio)
            if (this.virtualRadio == null) {
                this.showWarning('请先选择要删除的虚拟机 !', '警告');
                return
            }else{
                if (this.virtualRadio.state != '4') {
                this.showWarning('只允许删除停用状态的虚拟机 !', '警告');
                return
                }
            }
            const h = this.$createElement;
            this.$msgbox({
                title: '删除虚拟机',
                message: h('p', null, [
                    h('span', null, '是否删除 '),
                    h('span', { style: 'color: #20A0FF;font-size:1.2em;font-weight:bold' }, this.virtualRadio.virtualHostName),
                    h('span', null, ' 这个虚拟机？'),
                ]),
                type: 'warning',
                showCancelButton: true,
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                beforeClose: (action, instance, done) => {
                    if (action === 'confirm') {
                        instance.confirmButtonLoading = true;
                        instance.confirmButtonText = '删除中...';
                        setTimeout(() => {
                            done();
                            setTimeout(() => {
                                instance.confirmButtonLoading = false;
                            }, 100);
                        }, 400);
                    } else {
                        done();
                    }
                }
            }).then((action) => {
                if (action === 'confirm') {
                    let _url = '/resman/virtual/virtualMachine/' + this.virtualRadio.virtualId;
                    this.$http.delete(_url).then((response) => {
                        if (response.code === 0) {
                            this.$emit('updataTree');
                            this.getServersInfo(this.deviceId);
                            this.showMessage('删除成功!', 'success');
                        } else {
                            this.showWarning(response.msg, '删除失败');
                        }
                    }).catch((response) => {
                        console.log(response)
                    })
                } else {
                    showMessage('已取消删除', 'info');
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //虚拟机状态的修改
        virtualState(state){
            if (this.virtualRadio == null) {
                this.showWarning('请先选择要操作的虚拟机 !', '警告');
                return
            }
            let _url = '/resman/virtual/virtualMachine/state/'+this.virtualRadio.virtualId+'/'+state;
            this.$http.get(_url).then((response) => {
                if (response.code === 0) {
                    this.getServersInfo(this.deviceId);
                    this.showMessage('修改成功!', 'success');
                } else {
                    this.showWarning(response.msg, '修改失败');
                }
            }).catch((response) => {
                console.log(response)
            })
        },












        showMessage(msg, type) {
            this.$message({
                message: msg,
                type: type
            });
        },
        showWarning(msg, title) {
            this.$alert(msg, title, {
                showConfirmButton: false,
                showCancelButton: true,
                type: 'warning',
                cancelButtonText: '关闭',
            });
        },
    }
}
</script>